<template>
  <div>
  <el-row>
  <!-- 左侧 -->
  <el-col :span="8" >
    <el-card shadow="hover">
      <div class="user" >
      <img src="@/assets/logo.png" alt="">
        <div class="userMsg">
        <span>Admin</span>
        <span>超级管理员</span>
        </div>
        
      </div>
      <div class="userLoginMsg">
      <hr>
      <p>上次登录时间：2022-2-01</p>
       <p>上次登录地点：北京</p>
      </div>
    </el-card>
    
  </el-col>
  <!-- 右侧数据 -->
  <el-col :span='16' class="block">
  <el-card v-for='(item,index) in countData' :key='index' :body-style="{display:'flex', padding: '0px'}" class='card'>
  <div class="i" :style="{background: item.color}">
  <i :class="'el-icon-'+item.icon" >
  </i>
   
  </div>
  <div>
  <h3>￥ {{item.value}}</h3>
  <p>{{item.name}}</p>
  </div>

  </el-card>
  </el-col>
</el-row>
<!-- 下面 -->
<el-row>
<el-col :span="8">
<el-card>
<Table 
:tableData='tableData'
:tableLabel='tableLabel'
></Table>
</el-card>
</el-col>
<el-col :span="16"></el-col>
</el-row>
  </div>
</template>

<script>
import Table from '@/components/table/table'
export default {
    components:{Table},
data() {
    return {
  
        countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
      tableData: [
          {
            name: 'oppo',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: 'vivo',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: '苹果',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: '小米',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: '三星',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: '魅族',
           todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          }
        ],
        tableLabel:
            {
                名称:'name',
                今日销量:'todayBuy',
                本月销量:'monthBuy',
                共计销量:'totalBuy',

            },
        

    }
},
}
</script>

<style scoped>
.el-card img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
   
}
.user{
    display: flex;
    align-items: center;
}
.user span{
    display: block;
    padding: 2px;
}
.userMsg{
    
    margin-left: 10px;
}
.userLoginMsg{
    color: grey;
}
.block{
    text-align: center;
    display: flex;
    justify-content: flex-start;

    align-items:center;/*垂直居中*/
    flex-wrap: wrap;
    padding: 0 10px;
 
   
}
.card{
    align-items:center;/*垂直居中*/
     width: 30%;
     margin: 5px 5px;
    box-sizing: border-box;
}
.i{
    text-align: center;
    width: 80px;
   height: 100px;
     display: flex;
   justify-content: center;
    align-items:center;/*垂直居中*/
}
.i>i{
  
}
.el-row{
  margin-top: 20px;
}
</style>